<template>
  <div>
    <!-- 搜索框 -->
    <search-card>
      <el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item prop="name" label="考核项名称">
          <el-input size="small" v-model="searchInfo.name" placeholder="请输入考核项名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="resetSearch">
            <el-icon class="icon"><elementRefresh/></el-icon> 
            <span class="icon-font">刷新</span>
          </el-button>
          <el-button size="small" type="primary" @click="onSearch">
            <el-icon class="icon"><elementSearch/></el-icon> 
            <span class="icon-font">搜索</span>
          </el-button>
        </el-form-item>
      </el-form>
    </search-card>
    <!-- 表格内容 -->
    <el-card shadow="never" class="table-card">
      <el-button size="medium" type="success" v-if="btnConfig.showAddBtn" @click="addRow">
        <el-icon class="icon"><elementCirclePlusFilled/></el-icon> 
        <span class="icon-font">添加</span>
      </el-button>
      <el-button size="medium" type="danger" v-if="btnConfig.showdeleteBtn" @click="deleteRows">
        <el-icon class="icon"><elementDelete/></el-icon> 
        <span class="icon-font">删除</span>
      </el-button>

      <!-- 表格内容 -->
      <table-template 
        ref="TableTemplateRef"
        class="main-table"
        :tableData="tableData"
        :tableConfig="tableConfig"
        v-loading="loading"
        @handleDelete="handleRowDelete"
        @handleEdit="handleRowEdit"
      ></table-template>
      <!-- 分页条 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="tableData.all.length"
        prev-text="上一页"
        next-text="下一页">
      </el-pagination>
    </el-card>
    <AddItem ref="AddItem"
    @getData="getData"
    ></AddItem>
    
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import service from '/@/utils/request';
import TableTemplate from '/@/components/table/template/template.vue'
import SearchCard from '/@/components/table/card/search.vue';
import AddItem from '/@/views/assessment/item/components/add.vue';
export default {
	name: 'ItemTable',
  components: {
    SearchCard,
    TableTemplate,
    AddItem
  },
	setup() {
    const searchForm = ref()

    const searchInfo =  reactive({
      name:'',
    })
    
    let currentPage = ref(1)
    let pageSize = ref(5)
    let AddItem = ref()

    const defaultColumns = [{ // 默认列
      prop: "noop",
      label: "",
      sortable: true,
      showOverflowTooltip: true,
      align: "center"
    }]
    const tableConfig = reactive({ // 表格配置
      stripe: true,
      maxHeight: null,
      hasSelectionRole: true,
      button:['del']
    })
    const btnConfig = reactive({
      showAddBtn: true,
      showdeleteBtn: true,
    })
    const httpInfo = reactive({
      listUrl: '/admin/aitem/getList',
      deleteUrl: '/admin/aitem/remove',
      saveUrl: '/admin/aitem/save',
      updateUrl: '/admin/aitem/update',
    })
    let loading = ref(false) // 表格加载 等待

 
    // const Dialogform = ref()
    // let formInfo = ref()
    let TableTemplateRef = ref()
    // let dialogInfo = reactive(initInfo)
    let tableData = reactive({ // 表格数据初始化
      columns: [], // 表格标题
      all: [], // 所有的数据 （用于导出数据）
      data: [] // 界面显示的数据
		})

    // // ===================== axios ===============
    const getData = async (params) => { // 获取所有数据
      loading.value = true
      let dataInfo = await service.get(httpInfo.listUrl, {params: params}) // 获取数据
      if (dataInfo.code === 200) {
        tableData.columns = dataInfo.data.columns != undefined ? dataInfo.data.columns: defaultColumns 
        tableData.all = dataInfo.data.data != undefined ? dataInfo.data.data: []
        refreshCurrentData()
      } else {
        tableData.columns = defaultColumns
        tableData.all = []
      }
      loading.value = false
    }
    getData()

    const deleteData = async (params) => { // 获取所有数据
      loading.value = true
      let dataInfo = await service.post(httpInfo.deleteUrl, params) // 获取数据
      if (dataInfo.code === 200) { ElMessage.success(dataInfo.msg); getData()} 
      else { ElMessage.error(dataInfo.msg); getData()}
      loading.value = false
    }

    // const addData = async (params) => { // 添加所有数据
    //   loading.value = true
    //   let dataInfo = await service.post(httpInfo.saveUrl, params) // 获取数据
    //   if (dataInfo.code === 200) { ElMessage.success(dataInfo.msg); } 
    //   else { ElMessage.error(dataInfo.msg); }
    //   getData()
    //   loading.value = false
    // }
    // const editData = async (params) => { // 添加所有数据
    //   loading.value = true
    //   let dataInfo = await service.post(httpInfo.updateUrl, params) // 获取数据
    //   if (dataInfo.code === 200) { ElMessage.success(dataInfo.msg); } 
    //   else { ElMessage.error(dataInfo.msg); }
    //   getData()
    //   loading.value = false
    // }
    // // ===================== 分页工具 ===============
    const refreshCurrentData = () =>{ // 界面刷新
      if (tableData.all != undefined) {
        tableData.data = tableData.all.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
      }
    }
    const handleSizeChange = (size) => { // 每页个数改变
      currentPage.value = 1
      pageSize.value = size
      refreshCurrentData()
    }
    const handleCurrentChange = (newPage) => { // 当前页改变
      currentPage.value = newPage
      refreshCurrentData()
    }

    // getData() // 获取数据

    // // ===================== 每一行的按钮 ===============
    const handleRowDelete = (index, row) => { // 删除
     ElMessageBox.confirm(
        '确认要删除当前信息?', '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'error',
        }
      )
        .then(() => {
          let data = new FormData()
          data.append("ids",row.id+',')
          deleteData(data)
        })
    }

    const handleRowEdit = () => {
      // opDialogVisible.value = true
      // opDialogTitle.value = '编辑' + pageName
      // formInfo.value= dialogInfo
    }


    // // ===================== 表头的按钮 ===============

    const resetSearch = () => { // 刷新
      searchForm.value.resetFields()
      onSearch()
    }
    const addRow = () => { // 添加
      AddItem.value.opDialogVisible = true
    }
    const onSearch = () => { // 搜索
       getData({searchInfo:searchInfo})
    }
    const deleteRows = () => {

      // ElMessageBox.confirm(
      //   '确认要删除当前 ' + TableTemplateRef.value.multipleSelection.length + ' 条信息?', '提示',
      //   {
      //     confirmButtonText: '确认',
      //     cancelButtonText: '取消',
      //     type: 'error',
      //   }
      // )
      //   .then(() => {
      //     let ids = ''
      //     TableTemplateRef.value.multipleSelection.forEach(item => {
      //       ids = ids + item.id  + ','
      //     })
      //     let data = new FormData()
      //     data.append("ids",ids)
      //     deleteData(data)
      //   })
    }

		return {
      searchInfo,
      searchForm,
      AddItem,
      onSearch,
      resetSearch,
      // opDialogVisible,
      // opDialogTitle,
      // Dialogform,
      // formInfo,
      loading,
      tableData, 
      pageSize,
      currentPage,
      TableTemplateRef,
      btnConfig,
      tableConfig,
      getData,
      handleRowDelete,
      handleRowEdit,
      handleSizeChange,
      handleCurrentChange,
      addRow,
      deleteRows,
      // handleCloseDialog,
      // rules,
    };
	},
};
</script>

<style lang="scss" scoped>
.table-card{
  margin-top: 10px;
}
.pagination{
  margin-top: 10px;
}
.icon{
  margin-left: -5px;
  margin-top: -1px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
.icon-font{
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
.el-form-item{
  vertical-align: top;
}
</style>
